<template>
  <div id="" class="mb10">
    <div class="appointType">
      <span>{{item.classify.classifyName}}&nbsp;{{getSkillType(item.skillType)}}</span>
      <p>
        <img src="@/assets/appointmentImage/address_icon3.png" alt="" width="10">
        {{item.agreedAddr}}
      </p>
    </div>
    <div class="bgWhite appointBox">
      <img class="appointImg" :src="imgUrlLink(item.ballUser.headPortrait)" alt="">
      <div class="appointCon">
        <div class="appointConTop">
          <span>
            <h3 class="inline-block">{{item.ballUser.nickName}}</h3>
            <img src="@/assets/appointmentImage/woman_icon.png" alt="" width="12">
          </span>
          <span class="appointTime">
            <em>{{item.tHours}}</em>小时
            &nbsp;
            <em>{{item.amount}}</em>元
          </span>
        </div>
        <ul class="appointConUl">
          <li>{{item.classify.classifyName}} {{getLever(item.sportsLev)}}</li>
          <!-- <li>时间：每周六下午四点到六点</li> -->
          <li>时间：{{item.startTime}}</li>
          <li v-if="item.state==0">支付时间：未支付</li>
          <li v-else>支付时间：2018-07-27 09:40:22</li>
          <li>联系方式：{{item.ballUser.phone}} &nbsp;<img src="@/assets/appointmentImage/phone_icon.png" alt="" width="10"></li>
        </ul>

        <div class="appointBtn mt10" v-if="page_type==0"><!-- 我预约的 -->
          <button type="button" name="button" v-if="item.state==1" @click="toPayment(item.id)">支付预约</button>
          <div class="inline-block" v-if="item.cancel">
            <!-- cancel.state:0等待；1同意；2拒绝 -->
            <span class="appointTime" v-if="item.cancel.state==0">预约取消中</span>
            <span class="appointTime" v-if="item.cancel.state==1">已同意取消</span>
            <span class="appointTime" v-if="item.cancel.state==2">已被拒绝 后台审核中</span>
          </div>
          <div class="inline-block" v-else>
            <button type="button" name="button" v-if="item.state==2">进行中</button>
            <button type="button" name="button" v-if="item.state==2" @click="orderFinish(item.id)">确认完成</button>
            <button type="button" name="button" @click="cancleEvent(item.id)" ref="cancleTxt" v-if="item.state==0 || item.state==1 || item.state==2">取消预约</button>
          </div>

          <span class="appointTime" v-if="item.state==3">预约已完成</span>
          <span class="appointTime" v-if="item.state==4">预约已取消</span>

          <!-- 预约已完成or预约取消  只显示一行文字 -->
          <!-- 预约已取消
          预约已完成 -->
        </div>
        <div class="appointBtn mt10" v-else><!-- 预约我的 -->
          <button type="button" name="button" @click="agreeOrder(item.id)">确认预约</button>
          <button type="button" name="button" @click="cancleEvent(item.id)">取消预约</button>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import {orderCancle,orderCancleOper,orderDemandAgree,orderFinish} from '@/utils/ajaxRequest.js';
export default {
  name: "",
  props: ['item','page_type'],
  data: () => ({
    idx:0,    //我预约的
    token:'',
  }),
  methods: {
    // 图片地址拼接
    imgUrlLink(imgurl) {
      return this.$imgUrlLink(imgurl);
    },
    // 技能类型
    getSkillType(skilltype) {
      switch (skilltype) {
        case 0:
          return "陪练"
          break;
        case 1:
          return "圈友"
          break;
        case 2:
          return "教练"
          break;
        default:

      }
    },
    // 等级
    getLever(lever) {
      switch (lever) {
        case 0:
          return "初级"
          break;
        case 1:
          return "中级"
          break;
        case 2:
          return "高级"
          break;
        default:

      }
    },
    // 取消预约
    cancleEvent(orderId) {
      let self = this;
      let orderParam = {
        token:self.token,
        orderId:orderId
      }
      self.messageBox.confirm('确定取消本次预约？').then(action=>{
        orderCancle(orderParam).then(res=>{
          console.log(res);
          if(res) {
            self.toast(res.data.msg);
            self.$router.go(0);   //刷新当前页面
          }
        })
      })
    },
    // 同意预约
    agreeOrder(orderId) {
      let self = this;
      let orderParam = {
        token:self.token,
        orderId:orderId,
      }
      self.messageBox.confirm('同意本次预约？').then(action=>{
        orderDemandAgree(orderParam).then(res=>{
          console.log(res);
          if(res) {
            self.toast(res.data.msg);
            self.$router.go(0);   //刷新当前页面
          }
        })
      })
    },
    // 跳转支付页面
    toPayment(orderId) {
      this.$router.push({path:'/paymentType',query:{orderId:orderId}});
    },
    // 完成订单
    orderFinish(orderId) {
      let self = this;
      let orderParam = {
        token:self.token,
        orderId:orderId,
      }
      self.messageBox.confirm('确认完成？').then(action=>{
        orderFinish(orderParam).then(res=>{
          console.log(res);
          if(res) {
            self.toast(res.data.msg);
            self.$router.go(0);   //刷新当前页面
          }
        })
      })
    },
  },
  mounted() {
    //do something after mounting vue instance
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    this.token = xlyd_loginInfo.token;
  }
}
</script>
<style lang="scss" scoped>
.appointType{
  @include flex;
  justify-content: space-between;
  color: white;
  padding: 8px 4px;
  background: $lightBlue;
  border-radius: 2px;
  span{
    font-size: 15px;
  }
  p{
    font-size: 12px;
  }
}
.appointBox{
  @include flex;
  padding: 8px 4px;
  align-items: flex-start;
  .appointImg{
    width: 60px;
    height: 60px;
    border-radius: 100%;
  }
  .appointCon{
    @include flexcell;
    margin-left: 10px;
    .appointConTop{
      @include flex;
      justify-content: space-between;
    }
    .appointTime{
      color: $lightColor;
      em{
        color: $lightBlue;
        font-size: 18px;
        font-weight: bold;
        margin-right: 4px;
      }
    }
    .appointConUl{
      color: $lightColor;
      font-size: 12px;
      line-height: 2em;
    }
    .appointBtn{
      text-align: right;
      button{
        padding: 3px 6px;
        border-radius: 4px;
        background: none;
        font-weight: bold;
        &{
          border:1px solid $lightBlue;
          color: $lightBlue;
          margin-right: 10px;
        }
        &:last-child{
          border:1px solid $yellowColor;
          color: $yellowColor;
        }
      }

    }
  }
}
</style>
